<template>
  <div>
    <a-tag><a href="https://github.com/vueComponent/ant-design">Link</a></a-tag>
    <a-tag
      closable
      @close="log"
    >Tag 2</a-tag>
    <a-tag
      closable
      @close.prevent
    >Prevent Default</a-tag>

    <a-checkable-tag
      v-model:checked="checked1"
      @change="handleChange"
    >Tag1</a-checkable-tag>
    <a-checkable-tag
      v-model:checked="checked2"
      @change="handleChange"
    >Tag2</a-checkable-tag>
    <a-checkable-tag
      v-model:checked="checked3"
      @change="handleChange"
    >Tag3</a-checkable-tag>
    <a-tag color="pink">pink</a-tag>
  </div>

  <a-divider></a-divider>
  <template
    v-for="(tag, index) in tags"
    :key="tag"
  >
    <a-tooltip
      v-if="tag.length > 10"
      :title="tag"
    >
      <a-tag
        :closable="index !== 0"
        @close="handleClose(tag)"
      >
        {{ `${tag.slice(0, 10)}...` }}
      </a-tag>
    </a-tooltip>
    <a-tag
      v-else
      :closable="index !== 0"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </a-tag>
  </template>
  <a-input
    v-if="inputVisible"
    ref="inputRef"
    v-model:value="inputValue"
    type="text"
    size="small"
    :style="{ width: '78px' }"
    @blur="handleInputConfirm"
    @keyup.enter="handleInputConfirm"
  />
  <a-tag
    v-else
    style="background: #fff; border-style: dashed"
    @click="showInput"
  >
    +
    New Tag
  </a-tag>

  <a-divider></a-divider>
  <span :style="{ marginRight: '8px' }">Categories:</span>
  <template
    v-for="tag in state.tags"
    :key="tag"
  >
    <a-checkable-tag
      :checked="state.selectedTags.indexOf(tag) > -1"
      @change="checked => handleChange(tag, checked)"
    >
      {{ tag }}
    </a-checkable-tag>

  </template>
  <br>
  <a-tag color="success">success</a-tag>
  <a-tag :bordered="false">Tag 1</a-tag>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      checked1: false,
      checked2: false,
      checked3: false,

      // inputRef: null,
      tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
      inputVisible: false,
      inputValue: '',


      state: {
        tags: ['Movies', 'Books', 'Music', 'Sports'],
        selectedTags: [],
      }
    }
  },
  created() { },
  mounted() { },
  methods: {
    log(e) {
      console.log(e);
    },
    handleChange() {

    },
    handleClose(removedTag) {
      const tags = this.tags.filter(tag => tag !== removedTag);
      console.log(tags);
      this.tags = tags;
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    },

    handleInputConfirm() {
      const inputValue = this.inputValue;
      let tags = this.tags;
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
      }
      console.log(tags);
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: '',
      });
    },
    handleChange(tag, checked) {
      const { selectedTags } = this.state;
      const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
      console.log('You are interested in: ', nextSelectedTags);
      this.state.selectedTags = nextSelectedTags;
    },
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
